<template>  
	<scroll-view scroll-y class="page">  
		<!-- 头部logo-->
		<view class="UCenter-bg bg-gradual-green">
			<image v-if="isVisitor==false" :src="avatar" round
				class="png animation-slide-right margin-bottom-sm cu-avatar round xl" mode="widthFix"
				:style="[{animationDelay: '0.1s'}]"></image>
			<text v-if="isVisitor==false" class="loaded">{{name}}</text>
			<image v-if="isVisitor==true" src='/static/visitor.jpg' mode='aspectFit'></image>
			<text v-if="isVisitor==true" class="visitor">游客</text>

		</view>
		<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">


			<!-- <view class="cu-item  animation-slide-bottom cu-form-group" :style="[{animationDelay: '0.1s'}]">
				<view class="text-gray">消息推送</view>
				<switch class='blue radius' @change="SwitchD" :class="switchD?'checked':''"
					:checked="switchD?true:false"></switch>
			</view> -->
			<!-- <view class="cu-item arrow animation-slide-bottom " :style="[{animationDelay: '0.3s'}]">
				<view @click="update" class="content" hover-class="none">
					<text class="cuIcon-upload text-yellow"></text>
					<text class="text-grey">系统更新</text>
				</view>
			</view> -->
			<!--下载进度条-->
			<!-- <view v-if="loading" class="padding bg-white text-grey">
				更新中...
				<view class="cu-progress round sm striped active">
					<view class="bg-green" :style="[{ width:loading?loadingTime:''}]">{{loadingTime}}</view>
				</view>
		
			</view> -->


			<view class="cu-item arrow animation-slide-bottom " :style="[{animationDelay: '0.5s'}]">

				<view @click="setting(userName)" class="content" hover-class="none">
					<text class="cuIcon-settingsfill text-blue"></text>
					<text class="text-grey">设置</text>
				</view>

			</view>
			<view class="cu-item arrow animation-slide-bottom " :style="[{animationDelay: '0.5s'}]">

				<view @click="rankList()" class="content" hover-class="none">
					<text class="cuIcon-copy text-pink"></text>
					<text class="text-grey">排行榜</text>
				</view>

			</view>
			<view class="cu-item arrow animation-slide-bottom " :style="[{animationDelay: '0.5s'}]">
			
				<view @click="message()" class="content" hover-class="none">
					<text class="cuIcon-message text-green"></text>
					<text class="text-grey">给我留言</text>
				</view>
			
			</view>
			<!-- <view class="cu-item arrow animation-slide-bottom " :style="[{animationDelay: '0.5s'}]">
				<view class="content" hover-class="none">
					<picker @change="PickerChange" :value="index" :range="picker">
						<text class="cuIcon-copy text-pink" style="margin-left: 10rpx;"></text>
						<text class="text-grey" style="margin-left: 15rpx;">当前项目:</text>
						<text class="picker text-grey" style="margin-left: 30rpx;">
							{{index>-1?picker[index]:nowProject}}
						</text>
					</picker>
				</view>
		
		
			</view>
		 -->

			<view v-if="isVisitor==true" class="cu-item arrow animation-slide-bottom"
				:style="[{animationDelay: '0.7s'}]">
				<view @tap="login" data-target="DialogModal1" class="content" hover-class="none">
					<text class="cuIcon-exit text-cyan"></text>
					<text class="text-purple">登录</text>
				</view>

			</view>
			<view v-if="isVisitor==false" class="cu-item arrow animation-slide-bottom"
				:style="[{animationDelay: '0.7s'}]">
				<view @tap="showModal" data-target="DialogModal1" class="content" hover-class="none">
					<text class="cuIcon-exit text-cyan"></text>
					<text class="text-grey">退出</text>
				</view>

			</view>
			<!--模态窗口弹窗-->
			<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">退出登录</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						您确认要退出吗？
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal"
								data-target="false">取消</button>
							<button class="cu-btn bg-green margin-left" @tap="hideModal" data-target="true">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isVisitor: uni.getStorageSync("isVisitor"),
				modalName: null,
				avatar: '',
				name: uni.getStorageSync("name"),
			}
		},
		onLoad() {
			// debugger   
			// this.isVisitor = uni.getStorageSync("isVisitor")
			// console.log(this.isVisitor)
		},

		//页面监听下拉动作（和onLoad等生命周期函数同级）
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)

			// uni.startPullDownRefresh({

			// 	success() {
			// 		//成功回调
			// 	},
			// 	fail() {
			// 		//失败回调
			// 	}
			// })
			// uni.stopPullDownRefresh()//停止下拉刷新
		},
		methods: {
			rankList(){
				uni.navigateTo({
					url: "/pages/me/ranking",
					success() {
						console.log("uni.navigateTo")
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			message(){
				uni.navigateTo({
					url: "/pages/me/message",
					success() {
						console.log("uni.navigateTo")
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			showModal(e) {

				this.modalName = e.currentTarget.dataset.target
			},
			onTabItemTap: function(item) {
				console.log(uni.getStorageSync("isVisitor"))
				this.isVisitor = uni.getStorageSync("isVisitor")
				// debugger
				// console.log(uni.getStorageInfoSync("avatar"))
				this.avatar = uni.getStorageSync("avatar")
			},
			login() {

				//uni.navigateTo	保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
				// uni.navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
				uni.navigateTo({
					url: "/pages/login/login",
					success() {
						console.log("uni.navigateTo")
					},
					fail(err) {
						console.log(err)
					}
				})
			},  
			setting(username) {
				if (this.isVisitor == true) {
					uni.showModal({
						title: '提示',
						content: '请先登录系统！',
						confirmColor: '#ee6666', //确定字体颜色
						showCancel: false, //没有取消按钮的弹框
						buttonText: '确定',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

				} else {
					uni.navigateTo({
						url: '/pages/me/setting?username=' + username,
						success: function success() {

							console.log("uni.navigateTo");
						},
						fail: function fail(err) {

							console.log(err);
						}
					})
				}



			},
			hideModal(e) {

				this.modalName = null
				let loginOut = e.currentTarget.dataset.target
				console.log(loginOut);

				if (loginOut == "true") {

					var that = this

					uni.request({

						url: "https://www.turkeylike.cn:8900/fzulab/sys/logout",
						method: 'post',
						data: {
							userId: uni.getStorageSync("userId")
							// userName:this.userName,
							// password:this.password,

						},


						success(res) {
							// console.log(res.data.result.avatar) 

							uni.setStorageSync('isVisitor', true)
							uni.setStorageSync('avatar', "")
							uni.setStorageSync('userId', "")
							// console.log(uni.getStorageSync("isVisitor"))
							uni.switchTab({
								url: '/pages/home/home',
								success: function(e) {
									// pop() 方法用于删除数组其他元素并返回数组的最后一个元素
									let currentPage = getCurrentPages().pop(); //当前页面
									if (currentPage == undefined || currentPage == null) return;
									currentPage.onLoad(); //页面存在刷新当前页面

								},
							});



						}
					})

					// // let userId = uni.getStorageSync('userId')
					// this.$http.get(this.loginOutUrl, {
					// 	params: {
					// 		userId: userId
					// 	}
					// }).then(res => {

					// 	if (res.data.success) {
					// 		websocetObj.stop()
					// 		this.remove()

					// 		uni.reLaunch({
					// 			url: '/pages/common/exit'
					// 		})

					// 	}
					// }).catch(err => {
					// 	console.log(err);
					// });

				}


			},

		}
	}
</script>

<style>
	/* .content {
		text-align: center;
		height: 400upx;
		margin-top: 200upx;
	} */
	.UCenter-bg {
		/* background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
		background-size: cover;
		height: 400rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.visitor {
		font-size: 50rpx;
		color: red;
	}

	.loaded {
		font-size: 50rpx;
		color: yellow;
	}
</style>
